<template>
    <div>
         <!-- 1.操作按钮区域 -->
    <div class="but">
        <el-button size="mini" type="primary" @click="buffer.isShow=true">添加</el-button>
        <el-button size="mini" type="warning">批量删除</el-button>
    </div>

    <!-- 2.数据列表区域 -->
    <list-comp :cateList="cateList" @edit="editCate" @remove="removeCate"></list-comp>

    <!-- 3.表单区域 -->
        <form-comp :buffer="buffer" ref="formRef" :cateList="cateList" @channel="getCateList"></form-comp>
    </div>
</template>

<script>
//引入数据列表、添加编辑表单组件
import listComp from './components/List.vue'
import formComp from "./components/Form.vue"
export default {
    components: {
        //
        listComp,
        formComp
    },
    data() {
        return {
            cateList:[],//商品的分类数据
            buffer:{
                isShow:false
            }
        };
    },
    mounted() {
        //1.获取全部商品分类数据
        this.getCateList()
    },
    methods: {
        //1.获取全部商品分类数据
        getCateList(){
            this.$api.reqCateList({istree:true})
            .then(res=>{
                this.cateList = res ? res : []
            })
            .catch(err=>console.log(err))
        },
        //2.编辑商品分类数据
        editCate(info){
            //2.1解构获取修改的数据
            let {index,row} = info
            //2.2删除无用字段
            if(row.children){delete row.children}
            //2.3赋值修改数据并展示
            this.$refs.formRef.form = JSON.parse(JSON.stringify(row))
            this.$refs.formRef.imageUrl = this.$pre + row.img
            //2.4弹起窗口
            this.buffer.isShow = true
        },
        //3.删除商品分类数据
        removeCate(info){
            //3.1解构获取要删除的数据
            let {index,row} = info
            //3.2提示用户是否删除
            this.$confirm('确定要删除吗?', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
            //3.2用户同意删除
            this.$api.reqCateRemove({id:row.id})
            .then(res=>{
                //3.4提示删除成功
                this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
                });
                //3.5更新列表 重新获取列表数据
                this.getCateList()
            })
            .catch(err=>console.log(err))
            
            }).catch(() => {});
        }
    },
};
</script>

<style scoped>
.but{
    margin: 20px 0;
}
</style>
